<template>
  <div class="progress-bar" ref='precentBar' @click="handleClick">
    <div class="bar-inner">
      <div class="progress" ref="progress" ></div>
      <div class="progress-btn-wrapper" ref="progressBtn"
          @touchstart.prevent='touchstart'
          @touchmove.prevent='touchmove'
          @touchend='touchend'
      >
        <div class="progress-btn"></div>
      </div>
    </div>
  </div>
</template>

<script>
import {prefixStyle} from 'common/js/dom'
const transform= prefixStyle('transform')
export default {
  props:{
    precent:{
      type:Number,
      default:0
    },
    currentTime2:{
      type:Number
    }
  },
  created() {
    this.pos={}
  },
  methods:{
    touchstart(e) {
      //触摸标志
      this.pos.moveFlag=true
      //触摸位置
      this.pos.startX=e.touches[0].pageX
      //已经播放进度的 宽度
      this.pos.leftX=this.$refs.progress.clientWidth
      
    },
    touchmove(e) {
      if(!this.pos.moveFlag){
        return
      }
      //滑动的距离 以及 范围
      const moveDistance=e.touches[0].pageX-this.pos.startX
      const offsetPageX=Math.min( this.$refs.precentBar.clientWidth - 16 , Math.max(0,moveDistance+this.pos.leftX))
      const precent=offsetPageX/(this.$refs.precentBar.clientWidth - 16)
      this.slidingTimeChange(precent)
      this._barSet(offsetPageX)
    },
    touchend(e) {
      this.pos.moveFlag=false
      //派发 播放位置进度
      this.sendBarStatus()
    },
    //进度条和按钮设置
    _barSet(offset) {
      this.$refs.progress.style.width=`${offset}px`
      this.$refs.progressBtn.style[transform] =`translate3d(${offset}px,0,0)`
    },
    //发送当前进度
    sendBarStatus() {
      const pre=this.$refs.progress.clientWidth/(this.$refs.precentBar.clientWidth - 16)
      this.$emit('barStatus', pre)
    },
    //滑动进度条时 时间跟随改变
    slidingTimeChange(precent){
      this.$emit('slidingTimeChange',precent)
    },
    //点击改变进度条和按钮位置 并发送当前播放进度
    handleClick(e) {
      const barRect=this.$refs.precentBar.getBoundingClientRect();
      const offsetX= e.pageX- barRect.left
      // this._barSet(e.offsetX)
      this._barSet(offsetX)
      this.sendBarStatus()
    },
  },
  watch: {
    //播放进度
    precent( newVal) {
        if(newVal>= 0 && !this.pos.moveFlag) {
          const barWidth=this.$refs.precentBar.clientWidth - 16
          const offsetWidth= barWidth * newVal
          this._barSet(offsetWidth)
        }
    }
  },
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"

  .progress-bar
    height: 30px
    .bar-inner
      position: relative
      top: 13px
      height: 4px
      background: rgba(0, 0, 0, 0.3)
      .progress
        position: absolute
        height: 100%
        background: $color-theme
      .progress-btn-wrapper
        position: absolute
        left: -8px
        top: -13px
        width: 30px
        height: 30px
        .progress-btn
          position: relative
          top: 7px
          left: 7px
          box-sizing: border-box
          width: 16px
          height: 16px
          border: 3px solid $color-text
          border-radius: 50%
          background: $color-theme
</style>